<!-- 项目展示 -->
<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<view class="container">
			<view class="wrap">
				<view class="cu-card case no-card">
					<view class="cu-item shadow">
						<view class="image">
							<u-swiper :list="pointPic" keyName="image" height="200" interval="5000" showTitle
								:circular="true" :autoplay="true">
							</u-swiper>
						</view>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="margin-lr flex-sub">
							<view class="text-gray flex justify-between">
								<view class="item-name text-orange text-lg">采集时长(3-10秒)</view>
								<view>
									<u-input border="none" inputAlign="center" type="number" v-model="dataLength"
										placeholder="范围3-10秒">
										<template slot="suffix">
											<view style="width: 30px; font-size: 17px; color: black;">秒</view>
										</template>
									</u-input>
								</view>
							</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="margin-lr flex-sub">
							<view class="text-gray flex justify-between">
								<view class="item-name text-orange text-lg">采集描述</view>
								<view>
									<u-input border="none" v-model="description" placeholder="不超过20字"></u-input>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-card case no-card mt-5" v-show="false">
					<smh-timer ref="timer"></smh-timer>
				</view>
				<view class="collect" :class="disabled?'ready_background':'collecting_background'" @click="btnClick()">
					<view class="collect_text">{{Text}}<text v-show="showtime"
							class="timertext">剩余{{itemnumber}}秒</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import permissionManager from '@/common/permissionManager.js';

	const recorderManager = uni.getRecorderManager();
	const recordOptions = {
		sampleRate: 48000, //采样率
		numberOfChannels: 1, //录音通道数
		encodeBitRate: 320000, //编码码率
		format: 'wav' //音频格式，有效值 aac/mp3
	}
	export default {
		data() {
			return {
				showtime: false,
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#0055ff",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "采集记录",
						color: "#ffffff",
						fontSize: "20px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				itemnumber: '',
				path: '',
				dataLength: 3,
				recordingStatus: false,
				userInfo: '',
				disabled: false,
				Text: '开始采集',
				pointRealId: '',
				equipmentRealId: '',
				pointPic: [],
				pointName: '',
				description: '',
				uploadedFileUrl: '',
				timer: '',
				labelStyle: {
					'color': '#f37b1d',
					'font-size': '32upx',
				},
				inputStyle: {
					'color': 'red',
					'font-size': '32upx'
				}
			}
		},
		onLoad(options) {
			this.userInfo = uni.getStorageSync('userInfo');
			this.pointRealId = options.pointRealId;
			this.equipmentRealId = options.equipmentRealId;
			this.showPointInfo();
		},
		mounted() {
			recorderManager.onStop((res) => {
				this.path = res.tempFilePath;
				this.uploadSoundData();
			});
			recorderManager.onStart((res) => {
				console.log('开始录音！！！！！！！！！！！！');
				this.diasbled = !this.diasbled;
			});
		},
		methods: {
			showPointInfo() {
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_getPointInfo.replace('{userRealId}',
							this.userInfo.userRealId)
						.replace('{equipmentRealId}', this.equipmentRealId)
						.replace('{pointRealId}', this.pointRealId),
					dataType: "json",
					method: "GET",
					success: (res) => {
						this.pointName = res.data.data.name;
						this.dataLength = res.data.data.defaultDataLength
						var arr = []
						for (const item of res.data.data.picUrl) {
							arr.push({
								image: getApp().globalData.serverAddress + item,
								title: this.pointName,
							})
						}
						this.pointPic = arr
					}
				})
			},
			getTime(time) {
				let m = parseInt(time / 60);
				let s = time % 60;
				return this.towNum(m) + ':' + this.towNum(s);
			},
			towNum(num) {
				if (num >= 10) {
					return num;
				} else {
					return '0' + num;
				}
			},
			getImgUrl(image) {
				return getApp().globalData.serverAddress + image;
			},
			btnClick() {
				this.$u.debounce(this.recordData, 2000, true);
			},
			recordData() {
				if (this.disabled == true) {
					return;
				}
				if (this.dataLength < 3 || this.dataLength > 10) {
					this.$utils.showToast(this, '采集时长必须在3-10秒之间', 'warning', 1, '');
					return;
				}
				if (this.description.length > 20) {
					this.$utils.showToast(this, '采集描述不能超过20个字', 'warning', 1, '');
					return;
				}
				this.disabled = !this.disabled;
				this.itemnumber = this.dataLength
				this.Text = "采集中..."
				//点击开始采集以后,显示采集中
				//开始录音
				recorderManager.start(recordOptions);
				//录音开始以后等待一秒再开始倒计时
				setTimeout(() => {
					this.showtime = true
					this.countReset();
					this.countStart();
					this.getTimeIntervalplus();
				}, 1000)
			},
			uploadSoundData() {
				this.Text = "上传中..."
				uni.uploadFile({
					url: getApp().globalData.serverAddress + this.$uri.Uri_uploadSound.replace('{userRealId}', this
						.userInfo.userRealId),
					filePath: this.path,
					name: 'file',
					success: (res) => {
						let result = JSON.parse(res.data);
						if (result.code == 0) {
							if (result.data.length > 0) {
								this.uploadedFileUrl = result.data[0];
							}
						}
						let soundUploadAddDto = new Object();
						soundUploadAddDto.fileUrl = this.uploadedFileUrl;
						soundUploadAddDto.description = this.description;
						this.Text = "计算中..."
						uni.request({
							url: getApp().globalData.serverAddress + this.$uri.Uri_createCollectRecord
								.replace('{userRealId}', this.userInfo.userRealId)
								.replace('{equipmentRealId}', this.equipmentRealId)
								.replace('{pointRealId}', this.pointRealId),
							data: JSON.stringify(soundUploadAddDto),
							dataType: "json",
							method: "POST",
							success: (res) => {
								this.Text = "计算完成! "
								setTimeout(() => {
									console.log(this.pointRealId)
									console.log(this.equipmentRealId)
									uni.redirectTo({
										url: '/pages/records/recordList?pointRealId=' +
											this.pointRealId +
											"&equipmentRealId=" +
											this.equipmentRealId
									});
								}, 1000);

							},
							fail: (res) => {
								this.$utils.showToast(this, res.data.message, 'error', 1,
									'/pages/records/recordList?pointRealId=' + this
									.pointRealId + "&equipmentRealId=" + this.equipmentRealId);
							}
						});
					},
					fail: (res) => {
						this.$utils.showToast(this, res.data.message, 'error', 1, '');
					}
				});
			},
			getTimeIntervalplus() {
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					//判断当秒数大于等于输入框设定的秒数的时候
					if (this.$refs.timer.Number >= this.dataLength) {
						console.log('停止录音！！！！！');
						clearInterval(this.timer);
						this.countClear();
						this.Text = "采集结束"
						this.showtime = false
						recorderManager.stop();
					} else {
						this.itemnumber = this.dataLength - this.$refs.timer.Number
					}
				}, 1000);
			},
			countReset() {
				//重置计时器
				this.$refs.timer.reset()
			},
			countStart() {
				//手动开启计时器
				this.$refs.timer.start()
			},
			countClear() {
				//停止计时器
				this.$refs.timer.clear()
			},
			onLeftClick() {
				uni.redirectTo({
					url: '/pages/records/recordList?equipmentRealId=' + this.equipmentRealId + '&pointRealId=' +
						this.pointRealId
				})
			}
		}
	}
</script>

<style scoped>
	.timertext {
		font-size: 22px;
		position: absolute;
		transform: translate(-50%);
		left: 50%;
		top: 30px;
	}

	.bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 40px;
		/*脚部的高度*/
		background-color: white;
		clear: both;
	}

	.flex {
		display: flex;
		flex-direction: row;
	}

	.justify-between {
		justify-content: between;
	}

	.align-center {
		align-items: center;
	}

	.flex-1 {
		flex: 1;
	}

	.ml-3 {
		margin-left: 30rpx;
	}

	.mr-3 {
		margin-right: 30rpx;
	}

	.mt-5 {
		margin-top: 100rpx;
	}

	.collect {
		margin: auto;
		margin-top: 100rpx;
		width: 450rpx;
		height: 450rpx;
		border-radius: 50%;
	}

	.collect_text {
		position: relative;
		height: 450rpx;
		line-height: 450rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 48rpx;
	}


	.ready_background {
		background-color: #7e84ff;
		animation: myfirst 0.6s;
	}

	.collecting_background {
		background-color: #007AFF;
		animation: myfirsts 0.6s;
	}

	@keyframes myfirst {
		0% {
			transform: scale(1)
		}

		50% {
			transform: scale(1.2)
		}

		100% {
			transform: scale(1)
		}
	}

	@keyframes myfirsts {
		0% {
			transform: scale(1)
		}

		50% {
			transform: scale(1.2)
		}

		100% {
			transform: scale(1)
		}
	}
</style>
